<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="browsermode" content="application" />
    <meta name="x5-page-mode" content="app" />
    <title>签约银行卡汇聚</title>
    <meta charset="utf-8" />
    <link href="../css/main.css?rev=@@hash" rel="stylesheet" />
    <link href="../css/mui.min.css?rev=@@hash" rel="stylesheet" />
    <link href="../css/mui.picker.css?rev=@@hash" rel="stylesheet" />
    <link href="../css/mui.poppicker.css?rev=@@hash" rel="stylesheet" />
    <style>
        body {
            width: 3.75rem;
            /*background: url(../img/checkBg.png) no-repeat fixed;
            background-size: 100% 100%;*/
        }

        .personInfoContain {
            width: 3.43rem;
            height: 5.68rem;
            margin: .2rem auto 0;
            background: rgba(255, 255, 255, 0.9);
            border-radius: .2rem;
        }

        .cells_title {
            width: 3.43rem;
            text-align: center;
            color: #fe3267;
            margin: .16rem auto .19rem;
            padding: 0;
            border-radius: .2rem;
        }

        .cells_title>span {
            color: #606060;
        }

        .cells {
            position: static;
            transform: translate(0, 0);
            border-radius: 0 0 .2rem .2rem;
            box-shadow: 0 0 0 #fff;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0);
        }

        .cell {
            padding: .13rem .22rem .13rem;
        }

        .cellIconImg {
            width: .24rem;
            height: .24rem;
            margin-bottom: -.07rem;
            margin-right: .02rem;
        }

        .cell_hd {
            min-width: 0;
        }

        .selectTxt {
            float: left;
            display: inline-block;
            font-size: .14rem;
            color: #c4c4c4;
        }

        .empty {
            height: 1px;
        }

        .arrowImg {
            float: right;
            display: inline-block;
            width: .18rem;
            height: .18rem;
        }

        .placeholderTxt {
            width: 90%;
            padding-top: .05rem;
        }

        .mui-pciker-list li.highlight {
            color: #1EB97E;
        }

        .personInfoContain input {
            border: none;
            margin: 0;
            padding: 0;
            background: rgba(255, 255, 255, 0);
        }

        .arrowImg {
            float: right;
            display: inline-block;
            width: .18rem;
            height: .18rem;
        }

        .login_btn_code {
		    display: block;
		    width: .8rem;
		    height: .3rem;
		    line-height: .3rem;
		    font-size: .12rem;
		    color: #1EB97E;
		    text-align: center;
		    border: .01rem solid #1EB97E;
		    border-radius: .25rem;
        }

        .cells:after {
            width: 3.11rem;
            border-bottom: 1px solid #E4E4E4;
            left: .16rem;
        }

        .submitBtn {
            width: 3.11rem;
            position: static;
            margin: .25rem auto 0;
            font-size: .15rem;
            background-color: #1EB97E;
            border-radius: 45px;
            box-shadow: 0 0 0 #fff;
        }

        .mui-poppicker-btn-cancel {
            border-radius: 25px;
        }

        .mui-btn-blue,
        .mui-btn-primary,
        input[type=submit] {
            color: #fff;
		    border: 1px solid #1EB97E;
		    background-color: #1EB97E;
            border-radius: 25px;
        }

        header {
            width: 100%;
            height: .44rem;
            line-height: .44rem;
            background: #3276fe;
        }

        header img,
        header span {
            display: inline-block;
            float: left;
        }

        header .backIcon {
            width: .24rem;
            height: .24rem;
            margin: .1rem 0 0 .16rem;
        }

        header .pageTitle {
            width: 80%;
            text-align: center;
            color: #fff;
            font-size: .17rem;
        }

        header .refresh {
            float: right;
            margin-right: .16rem;
            font-size: .14rem;
            color: #fff;
        }
    </style>
</head>

<body>
    <!-- 蒙版 -->
    <div class="layer_load">
        <div class="layer_mask"></div>
        <div class="layer_load_icon icon-loading"></div>
    </div>
    <!--<header>
        <a href="identification.html">
            <img class="backIcon" src="../img/backIcon.png" />
        </a>
        <span class="pageTitle">银行账号信息</span>
        <span class="refresh"></span>
    </header>-->
    <div class="personInfoContain">
        <div class="empty"></div>
        <div class="cells_title">
            <img class="cellIconImg" src="../img/AKYK.png">请完善信息</div>

        <div class="cells">
            <div class="cell">
                <label class="cell_hd">
                    <img class="cellIconImg cellIcons" src="../img/bankName.png">
                </label>
                <div id="bindBank" class="placeholderTxt">
                    <span class="selectTxt">选择开户行</span>
                    <img class="arrowImg" src="../images/gogogo.png">
                </div>
            </div>
            <div class="cell">
                <label class="cell_hd">
                    <img class="cellIconImg cellIcons" src="../img/bankNo.png">
                </label>
                <div class="cell_cn">
                    <input type="tel" class="txt" placeholder="请输入银行卡号" id="bankCardNo" maxlength="19" />
                </div>
            </div>

            <div class="cell">
                <label class="cell_hd">
                    <img class="cellIconImg cellIcons" src="../img/phoneNo.png">
                </label>
                <div class="cell_cn">
                    <input type="tel" class="txt" placeholder="请输入手机号码" id="telNum" maxlength="11" />
                </div>
            </div>
            <div class="cell">
                <label class="cell_hd">
                    <img class="cellIconImg cellIcons" src="../img/bank3.png">
                </label>
                <div class="cell_cn">
                    <input type="text" class="txt" placeholder="请输入短信验证码" id="telSns" maxlength="6" />
                </div>
                <div class="cell_ft">
                    <a href="javascript:;" class="login_btn_code" id="btnCode">获取验证码</a>
                </div>
            </div>
        </div>
        <div class="submitBtn">
            提交
        </div>
    </div>
    <!-- 脚本 -->
    <script src="../lib/zepto.min.js?rev=@@hash"></script>
    <script src="../js/main.js?rev=@@hash"></script>
    <script src="../js/mui.min.js?rev=@@hash"></script>
    <script src="../js/mui.picker.min.js?rev=@@hash"></script>
    <script>
        (function (global, userUtil, layer) {
            var orderNo ;
            var localH = localStorage.getItem("localH")
            var bankList;
            if(global.query){
                orderNo = global.query['orderNo'];
            }
            if (!localH) {
                localH = localStorage.setItem("localH", document.documentElement.clientHeight)
            }
            $("body").height(Number(localH));

            var sessionId = userUtil.sid(), userUuid = userUtil.userID(), bankId, bankCardName;
            var _data = {
                "sessionId": sessionId
            };
            //  验证码
            $("#btnCode").on("click", function () {
                var $this = $(this);
                function isPoneAvailable(str) {
                    var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
                    if (!myreg.test(str)) {
                        return false;
                    } else {
                        return true;
                    }
                }
                if (!isPoneAvailable($("#telNum").val())) {
                    layer.tips("输入的手机号码不合法");
                    return;
                }
                var _data = {
                	"userUuid" :  userUuid,
                    "sessionId": sessionId,
                    "userBankNumber": $("#bankCardNo").val(),
                    "userMobileNo" : $("#telNum").val()
                }
                if (!$this.hasClass("dis")) {
                    $this.addClass("dis");
                    $.ajax({
                        url: global.localUrl + "wallet/orders/smsCodeFromHuiju",
                        type: "post",
                        data: JSON.stringify(_data),
                        contentType: 'application/json;charset=utf-8',
                        success: function (re) {
                            if (1 == re.code) {
                                showWaitTips();
                            }
                            else {
                                $this.removeClass("dis");
                                layer.tips(re.message);
                            }
                        },
                        error: function () {
                            $this.removeClass("dis");
                            layer.tips(global.netError);
                        }
                    });
                }
            });

            // 验证码倒计时
            function showWaitTips() {
                var $btnCode = $("#btnCode");
                var s = 60;
                $btnCode.text("已发送(" + s + ")").addClass("dis");
                var sv = setInterval(function () {
                    if (s > 1) {
                        s--;
                        $btnCode.text("已发送(" + s + ")");
                    } else {
                        $btnCode.text("重新获取").removeClass("dis");
                        clearInterval(sv);
                    }
                }, 1000);
            };

            //银行卡列表获取

            $.ajax({
                url: global.localUrl + "wallet/bankDefineList",
                type: "post",
                data: JSON.stringify(_data),
                contentType: 'application/json;charset=utf-8',
                success: function (re) {
                    if (1 == re.code) {
                        bankList = re.data;
                    }
                    else {
                        layer.tips(re.message);
                    }
                },
                error: function () {
                    layer.tips(global.netError);
                }
            });

            ///选择银行卡
            $("#bindBank").on("click", function () {
                var newPicker = new mui.PopPicker({
                    layer: 1
                });
                var newData = getPickData(bankList);
                newPicker.setData(newData);
                setTimeout(function () {
                    newPicker.show(function (items) {
                        if ((items[0] || {}).text == undefined) {
                            (items[0] || {}).text = "";
                        }
                        $("#bindBank .selectTxt").attr('dataId', (items[0] || {}).value);
                        $("#bindBank .selectTxt").text((items[0] || {}).text).css('color','#000');
                    });
                }, 200);
            });
            ////获取列表赋值
            function getPickData(data) {
                var retData = new Array();
                var retDatas = new Array();
                for (var i = 0; i < data.length; i++) {
                    //         if(data[i].bankName.length != 0) {
                    //             retDatas = getPickData(data[i].bankName);
                    // //这里的data[i].ChildrenClass 看你数据的具体形式填写替换，下面的InterID，InterName 也是
                    //         }
                    retData[i] = {
                        value: data[i].id,
                        text: data[i].bankName,
                        //children: retDatas
                    }
                }
                return retData;
            }
            // 提交/
            $(".submitBtn").click(function () {
                layer.showLoad();
                var _data = {
                    "userUuid": userUuid,
                    "sessionId": sessionId,
                    "bankId": $("#bindBank .selectTxt").attr("dataId"),
                    "bankNumberNo": $("#bankCardNo").val(),
                    "bankNumberMobile": $("#telNum").val(),
                    "smsCode": $("#telSns").val(),
                    "orderNo": orderNo
                };
                for (var e in _data) {
                    console.log(_data[e])
                    if (!_data) {
                        layer.tips("请输入完整信息");
                        return;
                    }
                }
                $.ajax({
                    url: global.localUrl + "wallet/huijuBankCard",
                    type: "post",
                    data: JSON.stringify(_data),
                    contentType: 'application/json;charset=utf-8',
                    success: function (re) {
                        console.log(re)
                        if (1 == re.code) {
                            layer.tips("签约成功");
                            layer.hideLoad();
                            setTimeout(function () {
                                window.location.href = "applyRecord.html";
                            }, 2000);

                        }
                        else {
                            layer.tips(re.message);
                            layer.hideLoad();
                        }
                    },
                    error: function () {
                        layer.tips(global.netError);
                        layer.hideLoad();
                    }
                });
            })


        })(global, userUtil, layer)
    </script>
</body>

</html>
